<template>
  <div>
    <video-player class="vjs-custom-skin"
                  id="videoElement"
                  ref="videoPlayer"
                  :options="playerOptions"
                  @ready="playerReadied">
    </video-player>
    <button @click="stop">stop</button>
    <button @click="start">start</button>
  </div>
</template>

<script>

import 'videojs-contrib-hls'

export default {
  name: 'hls-live',
  props: {
    src: {
      type: String,
      default: 'http://blue.zmzpl.com/live/blue.m3u8'
    }
  },
  data () {
    return {
      playerOptions: {
        // height: '320',
        // width: '100%',
        notSupportedMessage: '此视频暂无法播放，请稍后再试',
        sources: [{
          withCredentials: false,
          type: "application/x-mpegURL",
          src: this.src
        }],
        // controlBar: {
        //   timeDivider: false,
        //   durationDisplay: false,
        //   remainingTimeDisplay: true,
        //   fullscreenToggle: false  //全屏按钮
        // },
        controls:false,
        flash: { hls: { withCredentials: false }},
        html5: { hls: { withCredentials: false }},
        autoplay: true, // 自动播放
        // controls: true, // 控制条
        fluid: true, // 按比例缩放适应容器

        // preload: 'auto', // 预加载
        // muted: true, // 消除所有音频
        // loop: false, // 循环播放
        aspectRatio: "16:9",
        // poster: 'https://surmon-china.github.io/vue-quill-editor/static/images/surmon-9.jpg' //首屏图片
      },
      player:null
    }
  },
  methods: {
    playerReadied(player) {
      this.player = player
      var hls = player.tech({ IWillNotUseThisInPlugins: true }).hls
      player.tech_.hls.xhr.beforeRequest = function(options) {
        // console.log(options)
        return options
      }
    },
    stop(){
      this.player.pause()
    },
    start(){
      this.player.play()
    }
  },
  mounted() {
  }
}
</script>
<style scoped lang="stylus">
  .vjs-custom-skin /deep/video
      object-fit:fill
</style>
